import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import Userforms from './userForms';
import { Table, Pagination, Modal, DatePicker } from 'antd';
import styles from './Forms.less';
import moment from 'moment';

class Forms extends React.Component {

    constructor (props) {
        super(props);
    }

    componentDidMount () {
        const {ExamForms, dispatch, loading} = this.props;
        const {pageIndex, pageCount, date, total, records} = ExamForms;
        dispatch({
            type: 'ExamForms/getForms',
            payload: {
                date,
                pageIndex: 1,
                pageCount,
            },
        });
    }

    getUserForms = (payload) => {
        const {ExamForms, dispatch, loading} = this.props;
        const {userForms} = ExamForms;
        const {pageIndex, date} = payload;
        dispatch({
            type: 'ExamForms/getUserForms',
            payload: {
                pageIndex,
                date: date,
                pageCount: userForms.pageCount,
                userId: userForms.id,
            },
        });
    }

    closeModal = () => {
        const {dispatch} = this.props;
        dispatch({
            type: 'ExamForms/closeModal',
            payload: {},
        });
    }

    render () {

        const Header = (props) => {
            const {dispatch, pageCount, date} = props;
            const { MonthPicker } = DatePicker;
            return (
                <div className={styles.containerit}>
                    <MonthPicker
                        placeholder={date}
                        defaultPickerValue={moment('2015-06', 'YYYY-MM')}
                        onChange={(date, dateString) => {
                            dispatch({
                                type: 'ExamForms/getForms',
                                payload: {
                                    date: dateString,
                                    pageIndex: 1,
                                    pageCount,
                                },
                            });
                        }}
                    />
                </div>
            );
        };

        const columns = [
            {
                title: '姓名',
                dataIndex: 'name',
            },
            {
                title: '分数',
                dataIndex: 'mark',
            },
            {
                title: '操作',
                dataIndex: 'option',
                render: (text, record) =><div>
                    <a onClick={()=>{
                        dispatch({
                            type: 'ExamForms/getUserForms',
                            payload: {
                                pageIndex: 1,
                                pageCount: userForms.pageCount,
                                userId: record.id,
                                date: userForms.date,
                            },
                        });
                    }}>查询详情</a>
                </div>,
            },
        ];

        const {ExamForms, dispatch, loading} = this.props;
        const {pageIndex, pageCount, date, total, records, userForms, modalVisible} = ExamForms;
        return(
            <div className={styles.container}>
                <Header dispatch={dispatch} pageCount={pageCount} date={date} />
                <Table rowKey={id=>id.id}
                    columns={columns}
                    size="small"
                    loading={loading.global}
                    pagination={false}
                    dataSource={records} />
                <Pagination current={pageIndex} showTotal={()=> `共计 ${total} 条`}
                    style={{float: 'right', margin: 10}} size="small" total={total}
                    onChange={pages => {
                        dispatch({
                            type: 'Forms/getForms',
                            payload: {
                                date: date,
                                pageIndex: pages,
                                pageCount,
                            },
                        });
                    }}/>
                <Modal
                    title="积分报表详情"
                    style={{ top: 20 }}
                    width={1000}
                    visible={modalVisible}
                    onOk={() => this.closeModal()}
                    onCancel={() => this.closeModal()}
                    footer={null}
                >
                    <Userforms userForms={userForms} getUserForms={this.getUserForms}
                    />
                </Modal>
            </div>
        );
    }
}

Forms.propTypes = {
    ExamForms: PropTypes.object,
    loading: PropTypes.object,
    dispatch: PropTypes.func,
};

export default connect(({ ExamForms, loading }) => ({ ExamForms, loading }))(Forms);